/**
 *  学习目标：Todos 案例
 */
 import React,{useEffect, useState} from 'react';
 import './styles/base.css'
 import './styles/index.css'

export default function App(){
  const [list, setList] = useState(JSON.parse(localStorage.getItem('todo-list'))||[{
    id:1,
    task:"学习Vue",
    isDone:true
    },
    {
      id:2,
      task:"学习React",
      isDone:false
    },
    {
      id:3,
      task:"学习TS",
      isDone:false
    }
    ])
  const [type, setType] = useState(localStorage.getItem('todo-type')||'all')
  //计算属性在函数组件中,写在和return同级
  const showList = list.filter(item=>{
    if(type==="active") return !item.isDone
    if(type==="completed") return item.isDone
    return item
  })
  
 
  useEffect(()=>{
     localStorage.setItem('todo-list',JSON.stringify(list))
     localStorage.setItem('todo-type',type)
  },[list,type])
    //修改isDone状态事件逻辑
    const handleUpdateById=(id)=>{
      // console.log('id  ----->  ', id);
      const newList = list.map((item)=>{
        return {
          ...item,
          isDone:item.id===id?!item.isDone:item.isDone
        }
      })
      // console.log('newList  ----->  ', newList);
      setList(newList)
    }
    //删除数据点击事件逻辑
    const handleDelById=(id)=>{
      // eslint-disable-next-line array-callback-return
      const newList = list.filter(item=>{
        if(item.id!==id) return item
      })
      setList(newList)
    }
    //添加事件
    const handleAdd=(task) => { 
      // console.log('task  ----->  ', task);
      setList([...list,{task,isDone:false,id:Date.now()}])
     }
    //清除已完成
    const handleDelOk=() => { 
      //  console.log('1  ----->  ', 1);
        // eslint-disable-next-line array-callback-return
        const newList = list.filter(item=>{
          if(!item.isDone) return item
        })
        setList(newList)
      }
  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header handleAdd={handleAdd}/>
      {/* 主体 */}
      <Main showList={showList} handleUpdateById={handleUpdateById} handleDelById={handleDelById} />
      {/* 底部 */}
      <Footer type={type} setType={setType} list={list} handleDelOk={handleDelOk}/>
    </section>
  );
}


 function Header({handleAdd}) {
   const [task, setTask] = useState('')
   //输入框回车事件
    const handleKeyDown=(e) => { 
      //  console.log('e  ----->  ', e);
      if(e.keyCode===13){
        handleAdd(task)
        setTask('')
      }
     }
  return <header className="header">
    <h1>todo</h1>
    <input className="new-todo" placeholder="需要做什么" onChange={(e)=>setTask(e.target.value)} value={task} onKeyDown={handleKeyDown} autoFocus />
  </header>;
}

function Main({showList,handleUpdateById,handleDelById,}) { 
  return <section className="main">
    <input id="toggle-all" className="toggle-all" type="checkbox" />
    <label htmlFor="toggle-all">全选</label>
    <ul className="todo-list">
      {
        showList.map(item=>{
          return  <li className={item.isDone?"completed":''} key={item.id}>
          <div className="view">
            <input className="toggle" type="checkbox" onChange={()=>handleUpdateById(item.id)} checked={item.isDone}/>
            <label>{item.task}</label>
            <button className="destroy" onClick={()=>handleDelById(item.id)}></button>
          </div>
        </li>
        })
      }  
    </ul>
  </section>;
}


function Footer({list,handleDelOk,type,setType}) {
  const num = list.filter(item=>!item.isDone).length
  return <footer className="footer">
    <span className="todo-count">
      <strong>{num}</strong> 剩余
    </span>
    <ul className="filters">
      <li onClick={()=>setType("all")}>
        <a className={type==="all"?"selected":""} href="#/">
          全部
        </a>
      </li>
      <li onClick={()=>setType("active")}>
        <a className={type==="active"?"selected":""} href="#/active">
          未完成
        </a>
      </li>
      <li onClick={()=>setType("completed")}>
        <a className={type==="completed"?"selected":""} href="#/completed">
          已完成
        </a>
      </li>
    </ul>
    <button className="clear-completed" onClick={handleDelOk}>清除已完成</button>
  </footer>;
}